<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip</title>
  <style>
    .countainer{
      max-width: 800px;
      padding: 20px;
      margin: 30px auto 0;
      border-radius: 4px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .3);
    }
    .button{
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      outline: none;
      cursor: pointer;
      position: relative;
    }
    .button:hover{
      color: lightblue;
      border-color: lightblue;
    }

    .tooltip{
      position: absolute;
      background-color: #000;
      color: #fff;
      padding: 5px 10px;
      border-radius: 4px;
      white-space: nowrap;
      z-index: 10;
      display: none;
    }
    .tooltip.tool-top{
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
    }
    .tooltip.tool-top::before{
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-top: 4px solid #000;
      border-left: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-right: 4px solid transparent;
    }
    .tooltip.tool-left{
      top: 50%;
      left: -10px;
      transform: translate(-100%, -50%);
    }
    .tooltip.tool-left::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 4px solid #000;
      border-bottom: 4px solid transparent;
      border-right: 4px solid transparent;
    }
    .tooltip.tool-bottom{
      top: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
    }
    .tooltip.tool-bottom::before{
      content: '';
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 4px solid #000;
      border-right: 4px solid transparent;
    }
    .tooltip.tool-right{
      top: 50%;
      right: -10px;
      transform: translate(100%,-50%);
    }
    .tooltip.tool-right::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(-100%,-50%);
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-right: 4px solid #000;
    }
    .show{
      display: block;
    }
    @media screen and (min-width: 600px){
      .pages{
        display: flex;
        justify-content:space-between;
      }
    }

    @media screen and (max-width: 600px){
      .pages{
        display: flex;
        flex-direction: column;
      }
      .pages div:first-child{
        padding-bottom: 6px;
      }
    }
    .pages a{
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="countainer pages">
    <div>上一个:<a href="../tab/tab.html">tab（标签页）</a></div>
    <div>下一个:<a href="../Carousel/Carousel.html">Carousel（走马灯）</a></div>
  </div>
  <div class="countainer">
    <h2>Tooltip</h2>
    <div class="btn-group">
      <button class="button" data-name="tooltip" data-align="top" data-text="我在上面">上</button>
      <button class="button" data-name="tooltip" data-align="bottom" data-text="我在下面">下</button>
      <button class="button" data-name="tooltip" data-align="left" data-text="我在左面">左</button>
      <button class="button" data-name="tooltip" data-align="right" data-text="我在右面">右</button>
      <button class="button" >不</button>
    </div>
  </div>


<script>
  const $ = s => document.querySelector(s)
  const $$ = s => document.querySelectorAll(s)
  class Tooltip{
    constructor($root){
      this.$root = $root
      this.$root.tooltip = this
      this.text = $root.dataset.text
      this.align = $root.dataset.align

      this.render()
      this.setRoot()
      this.show()
    }
    render(){
      let $div = document.createElement('div')
      this.$tooltip = $div
      $div.classList.add('tooltip', 'tool-'+this.align)
      $div.innerText = this.text
      this.$root.appendChild($div)
      console.log($div)
    }
    setRoot(){
      this.$root.showTooltip = this.show.bind(this)
      this.$root.hideTooltip = this.hide.bind(this)
    }
    show(){
      this.$tooltip.classList.add('show')
    }
    hide(){
      this.$tooltip.classList.remove('show')
    }
  }
  $$('[data-name="tooltip"]').forEach($node =>{
    $node.onmouseenter = function(){
      if($node.tooltip){
        $node.showTooltip()
      }else{
        new Tooltip($node)
      }
    }
    $node.onmouseleave = function(){
      $node.hideTooltip()
    }
  })
</script>


</body>
</html>